<form action="#" class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline" style="padding-top: 5px">
            &nbsp;&nbsp;
            <!-- <label>路由网关接口名称:</label> -->
            <div class="layui-inline">
                <input type="text" name="gatewayApiName" autocomplete="off" placeholder="请输入路由网关接口名称"
                       class="layui-input">
            </div>
            <label>状态:</label>
            <div class="layui-inline">
                <select name="state">
                    <option value="">请选择</option>
                    <option value="0">无效</option>
                    <option value="1">有效</option>
                </select>
            </div>
            <label>幂等性:</label>
            <div class="layui-inline">
                <select name="idempotent">
                    <option value="">请选择</option>
                    <option value="0">未支付</option>
                    <option value="1">已支付</option>
                </select>
            </div>
            <label>是否收费:</label>
            <div class="layui-inline">
                <select name="needfee">
                    <option value="">请选择</option>
                    <option value="0">免费</option>
                    <option value="1">收费</option>
                </select>
            </div>
            <div class="layui-inline">
                <button class="layui-btn" lay-submit lay-filter="routequery">搜索</button>
            </div>
        </div>
    </div>
</form>

<table id="route" lay-filter="route"></table> <!--触发的标记-->

<script>

    layui.use(['table', 'form', 'layer'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;

        form.render();  //搜索控件中，表单的渲染

        table.render({
            elem: '#route'
            , toolbar: '#my_toolbar'
            , height: 480
            , url: '/router/pageList'
            , cols: [[ //表头

                {type: 'checkbox', fixed: 'left'},  //左侧复选框，用于选中进行批量删除
                /* field:属性名 */
                {field: 'id', title: 'ID', width: 90, sort: true, fixed: 'left'}
                , {field: 'gatewayApiName', title: '路由网关接口名称'}
                , {field: 'serviceApiUrl', title: '服务接口地址'}
                , {field: 'serviceId', title: '真实服务ID'}
                , {field: 'description', title: '描述信息'}
                , {
                    field: 'state', title: '状态', templet: function (data) {
                        return (data.state == 1) ? '<span class="layui-badge layui-bg-green">有效</span>' : '<span class="layui-badge layui-bg-red" >无效</span>'
                    }
                }
                , {
                    field: 'idempotent', title: '幂等性', templet: function (data) {
                        return (data.idempotent == 1) ? '<span class="layui-badge layui-bg-green">已支付</span>' : '<span class="layui-badge layui-bg-red" >未支付</span>'
                    }
                }
                , {
                    field: 'needfee', title: '是否收费', templet: function (data) {
                        return (data.needfee == 1) ? '<span class="layui-badge layui-bg-green">收费</span>' : '<span class="layui-badge layui-bg-red" >免费</span>'
                    }
                }
                , {field: "right", title: "操作", toolbar: '#barDemo'}

            ]]
            , page: {
                limit: 8
                , limits: [3, 4, 6, 8, 10]
                , first: '首页'
                , last: '尾页'
                , prev: '<i class="layui-icon layui-icon-prev"></i>'
                , next: '<i class="layui-icon layui-icon-next"></i>'
                , layout: ['prev', 'page', 'next', 'count', 'limit', 'skip', 'refresh'] //自定义分页布局
            }
        });

        //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        table.on('tool(route)', function (obj) {
            var data = obj.data; //获得当前行数据
            //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var layEvent = obj.event;
            if (layEvent === 'del') { //删除
                layer.confirm('确定删除？', function (index) {
                    // 向服务端发送删除请求
                    // 此处可以发送ajax
                    $.ajax({
                        type: "delete",
                        url: "/router/remove/" + data.id,
                        success: function (res) {
                            console.log(res);
                            if (res > 0) {
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.msg("删除成功");
                                table.reload('route');   //重载父页的表单
                            } else
                                layer.msg("删除失败");
                        }
                    });
                    layer.close(index); //当前弹窗索引标记删除
                });
            } else if (layEvent === 'edit') {
                addOrEditWindow(data);
            }
        });

        //添加事件
        table.on("toolbar(route)", function (obj) {
            var layEvent = obj.event;
            if (layEvent === 'add') {
                addOrEditWindow(null);  //添加功能
            } else if (layEvent === 'batdel') {
                var checkStatus = table.checkStatus("route");
                var data = checkStatus.data;
                var params = "";
                $.each(data, function (i, obj) {
                    params += "&ids=" + obj.id;   //使用可变长参数获取参数
                });
                if (params == "") {
                    layer.msg("请勾选要删除的数据");
                    return;
                }
                layer.confirm('确定删除？', {btn: ['确定', '取消']}, function (index) {
                    $.ajax({
                        type: "post",
                        url: "/router/batchDelete",
                        data: params,
                        success: function (data) {
                            console.log(data);
                            if (data > 0) {
                                layer.msg("删除成功");
                                table.reload("route");
                            } else
                                layer.msg("删除失败");
                        }
                    });
                    layer.close(index);
                });
            }
        });


        function addOrEditWindow(data) {
            layer.open({  //打开弹窗
                type: 1,  //文档形式展示
                content: $('#route-edit-layer').html(), //获取页面内容
                title: '编辑'  //标题
                , area: ['500px', '400px'],  //显示文档区域
                btn: ['提交', '取消'] //可以无限个按钮
                , yes: function (index, layero) { //点击提交后的触发
                    layer.load();  //进行编辑的时候显示加载效果
                    $.ajax({
                        type: "post",  //注意：此处序列化数据，需要使用post请求传数据
                        url: (data != null) ? "/router/update" : "/router/save", //回传的数据为空则是添加，否则为修改
                        data: $("#route-edit-form").serialize(), //序列化数据
                        success: function (res) {
                            //alert("修改: "+res);
                            if (res == 1 && data != null)
                                layer.msg("修改成功");
                            else if (res == 1 && data == null) {
                                layer.msg("添加成功");
                            }
                            table.reload('route');
                            layer.close(index);   //关闭窗口

                            layer.closeAll('loading'); //关闭加载图标
                        }
                    })
                }, success: function (layero, index) { //访问内容成功，则渲染表单数据
                    form.render(); //表单的渲染
                    if (data != null) {
                        //data中的属性，要与customer-edit-form的name属性名一致，才能注入
                        form.val("route-edit-form", data); //注入文本控件
                        form.val("route-edit-form", { //注入单选框的值
                            "state": data.state + ""
                        });
                    }
                }
            });
        }

        form.on('submit(routequery)', function (data) {
            layer.msg(JSON.stringify(data.field));
            table.reload('route', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: data.field
            });
            return false;   //提交时局部刷新，不用整体刷新
        });

    });


</script>

<script type="text/html" id="my_toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="batdel">批量删除</a>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 修改需要注入的内容 -->
<script type="text/html" id="route-edit-layer">
    <form id="route-edit-form" style="width: 80%" class="layui-form" lay-filter="route-edit-form">
        <input type="hidden" name="id">

        <div class="layui-form-item">
            <label class="layui-form-label">路由网关接口名称</label>
            <div class="layui-input-block">
                <input type="text" name="gatewayApiName" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">服务接口地址</label>
            <div class="layui-input-block">
                <input type="text" name="serviceApiUrl" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">真实服务ID</label>
            <div class="layui-input-block">
                <input type="text" name="serviceId" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">描述信息</label>
            <div class="layui-input-block">
                <input type="text" name="description" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="state" title="有效" value="1" checked/>
                <input type="radio" name="state" title="无效" value="0"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">幂等性</label>
            <div class="layui-input-block">
                <input type="radio" name="idempotent" title="已支付" value="1" checked/>
                <input type="radio" name="idempotent" title="未支付" value="0"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否收费</label>
            <div class="layui-input-block">
                <input type="radio" name="needfee" title="收费" value="1" checked/>
                <input type="radio" name="needfee" title="免费" value="0"/>
            </div>
        </div>
    </form>
</script>

